<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8"/>
    <title>网页PPT</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>
<div class="container">
    <section>
        <h1>HTML快速入门</h1>
        <p>作者：XXX</p>
    </section>
    <section>
        <h1>本章目标</h1>
        <ol style="font-size: 120%; margin: 1rem 0;">
            <li>掌握行内标签的使用</li>
            <li>掌握块级标签的使用</li>
        </ol>
    </section>
    <section>
        <h1>HTML 行内标签</h1>
        <p><code>a</code>标签: a 标签定义超链接，常用于网页之间的跳转、设置文档书签，以及链接电话、邮箱等。</p>
        <p>语法示例: <code>&lta href="链接地址"&gt&lt/a&gt</code></p>
        <br>
        <p><code>span</code>标签: span标签用于组合文档中的行内元素，它就像一个透明的盒子，可以把多个盒子放在架子的同一行。</p>
        <p>语法示例: <code>&ltspan&gt&lt/span&gt</code></p>
        <br>
        <p><code>strong</code>标签: strong标签用于给文字加粗</p>
        <p>语法示例: <code>&ltstrong&gt&lt/strong&gt</code></p>
        <br>
        <p><code>img</code>标签: img标签用于展示图片</p>
        <p>语法示例: <code>&ltimg src="图像地址" alt="图像描述" /&gt</code></p>
    </section>
    <section>
        <h1>HTML 块级标签</h1>
        <p><code>div</code>标签: div标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。</p>
        <p>语法示例: <code>&ltdiv&gt&lt/div&gt</code></p>
        <br>
        <p><code>p</code>标签: p标签是用来划分 HTML 文档段落的。</p>
        <p>语法示例: <code>&ltp&gt&lt/p&gt</code></p>
        <br>
        <p>标题标签: 在 HTML 中一共有六级标题，用 &lth1&gt ~ &lth6&gt 来表示，其中 &lth1&gt 的标题字号最大，依次递减。</p>
        <p>语法示例: <code>&lth1&gt&lt/h1&gt</code></p>
    </section>
    <section>
        <h1>感谢观看！</h1>
    </section>
</div>
<div class="controls">
    <div class="btns">
        <button class="btn left disable">
            <img src="images/left-small.svg" alt="left">
        </button>
        <button class="btn right">
            <img src="images/right-small.svg" alt="right">
        </button>
    </div>
    <div class="page">1 / 5</div>
</div>
<script>
    // 默认隐藏除了第一页的所有PPT
    Array.from(document.querySelectorAll('section')).slice(1).forEach(e => e.style.display = 'none');
</script>
<script src="js/index.js"></script>
</body>

</html>